<template>
  <!-- 面包屑 -->
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>分配菜单</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
    :props="defaultProps" />
  <div class="btn">
    <el-button>取消</el-button>
    <el-button type="primary">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { watchEffect, ref } from "vue";
import type { Ref } from "vue";
import { defineStore } from "pinia";
import * as api from "../../json/request/api";
import { isDate } from "lodash";
import { useRoute } from "vue-router";

let route = useRoute();
const data: Ref<any[]> = ref([]);
console.log(route);

//分割字符串
let id = Number(route.fullPath.split("=")[1]);

const defaultProps = {
  children: "children",
  label: "label",
};

watchEffect(async () => {
  let table = await api.admin.getAdminallowMenu(id);
  // console.log(table);

  let data1 = table.filter((el) => {
    return el.parentId == 0;
  });

  //封装的函数
  function filterFn(val: number) {
    let data2 = table.filter((el) => {
      return el.parentId == val;
    });
    let newData2 = data2.map((el) => {
      // console.log(el.title);
      return {
        id: el.id,
        label: el.title,
      };
    });
    return newData2;
  }

  console.log(filterFn(97));
  let newData = data1.map((el) => {
    // console.log(el.title);
    return {
      id: el.id,
      label: el.title,
      children: filterFn(el.id),
    };
  });

  console.log(newData);

  data.value = newData;
});
</script>

<style lang="scss" scoped>
.btn {
  margin-left: 500px;
  margin-top: 100px;
}
</style>
